<template>
    <footer class="footer">
        <ul>
            <router-link custom v-slot="{ isActive, navigate }" to="/home">
                <li @click="navigate" :class="isActive ? 'active' : ''">
                    <span>首页</span>
                    <van-icon name="wap-home-o" />
                </li>
            </router-link>
            <router-link custom v-slot="{ isActive, navigate }" to="/kind">
                <li @click="navigate" :class="isActive ? 'active' : ''">
                    <span>分类</span>
                    <van-icon name="apps-o" />
                </li>
            </router-link>
            <router-link custom v-slot="{ isActive, navigate }" to="/cart">
                <li @click="navigate" :class="isActive ? 'active' : ''">
                    <span>购物车</span>
                    <van-icon name="shopping-cart-o" />
                </li>
            </router-link>
            <router-link custom v-slot="{ isActive, navigate }" to="/my">
                <li @click="navigate" :class="isActive ? 'active' : ''">
                    <span>我的</span>
                    <van-icon name="home-o" />
                </li>
            </router-link>
        </ul>
    </footer>
</template>

<script>
export default {
    name: "MyFooter"
}
</script>

<style scoped>
footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background-color: ghostwhite;

    li {
        text-align: center;
        height: 44px;
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

.active {
    color: red;
    background-color: yellow;
}
</style>